<template>
    <div>
        <h3>6、模块化项目的数据交互</h3>
        <h5>基本使用</h5>
        <pre><code>
        import axios from 'axios';
        export default {
            data(){
                return {
                    types:[]
                }
            },
            methods:{
                loadTypes(){
                    // 异步数据加载
                    axios.get("http://127.0.0.1/filmApi/loadTyps.php")
                        .then(( { data:{ msg,resultState,result } } )=>{
                            if(resultState){
                                this.types = result;
                            }else{
                                alert(msg)
                            }
                        })
                        .catch(()=>{
                            alert("网络错误，稍后重试")
                        });
                }
            }
        }
        </code></pre>
        <ul>
            <li v-for="(item,i) in types" :key="i">{{ item.typeId }}:{{ item.typeName }}</li>
        </ul>
        <input type="button" value="加载本地服务器的电影类型" @click="loadTypes()">
        <hr>
        <pre v-for="(item,i) in filmsA" :key="i">{{ item }}</pre>
        <input type="button" value="加载本地服务器的电影数据-有参数-GET" @click="getFilmList()">
        <hr>
        <pre>
        需要注意如果必须发送 FormData 数据，注意参数格式的转换
        + 可以直接使用随 axios 一起集成的 qs 模块进行 自动化转换

        <code>import QS from 'qs';</code>
        </pre>
        <pre v-for="(item,i) in filmsB" :key="i">{{ item }}</pre>
        <input type="button" value="加载本地服务器的电影数据-有参数-POST" @click="postFilmList()">
        <hr>
        <pre>
            {{ fileRes }}
            <img :src="fileRes.path" alt="" srcset="">
        </pre>
        <input type="file" @change="changeImg($event.target.files)">
        <input type="button" value="完成图片头像上传" @click="updateImg()">
        <hr>
        <pre>
        使用JS原型技术，在vue模块化项目main.js ，进行Vue原型方法扩展
            <code>
            import axios from 'axios'
            Vue.prototype.$axios = axios;
            </code>
        在当前vue模块化项目中，所有组件实例都可以直接通过 vm.$axios 方法异步请求对象
        通过上述方式完成项目的全局工具加载
        </pre>
        <input type="button" value="调用统一装载的 axios 对象" @click="printAxios()">
    </div>
</template>

<script>
import axios from 'axios';
// qs 的模块使用，不需要重新安装，因为 axios的安装默认集成 qs
import QS from 'qs';

export default {
    data(){
        return {
            types:[],
            filmsA:[],
            filmsB:[],
            userImgBin:"",
            fileRes:{}
        }
    },
    methods:{
        changeImg(files){
            this.userImgBin = files[0];
        },
        loadTypes(){
            // 异步数据加载
            axios.get("http://127.0.0.1/filmApi/loadTyps.php")
                 .then(( { data:{ msg,resultState,result } } )=>{
                     if(resultState){
                         this.types = result;
                     }else{
                         alert(msg)
                     }
                 })
                 .catch(()=>{
                     alert("网络错误，稍后重试")
                 });
        },
        async getFilmList(){
            try {
                let { data } = await axios.get("http://127.0.0.1/filmApi/loadFilms.php",{
                    params:{
                        size:2,
                        no:2
                    }
                });
                if(data.resultState){
                    this.filmsA = data.result;
                }else{
                    alert(data.msg);
                }
            } catch (error) {
                alert("网络错误，稍后重试")
            }
        },
        async postFilmList(){
            try {
                // let { data } = await axios.post("http://127.0.0.1/filmApi/loadFilms.php",{
                //     size:2,
                //     no:2
                // });
                let params = QS.stringify({
                    size:2,
                    no:2
                });
                let { data } = await axios.post("http://127.0.0.1/filmApi/loadFilms.php",params);
                if(data.resultState){
                    this.filmsB = data.result;
                }else{
                    alert(data.msg);
                }
            } catch (error) {
                alert("网络错误，稍后重试")
            }
        },
        async updateImg(){
            try {
                // 文件上传的请求参数对象 FormData
                let fd = new FormData();
                fd.append("headImage",this.userImgBin);
                fd.append("name","测试基本参数");
    
                let { data } = await axios.post("http://127.0.0.1/filmApi/uploadTest.php",fd);
                if(data.state){
                    this.fileRes = data.result
                }else{
                    alert(data.msg);
                }
            } catch (error) {
                alert("网络错误，稍后重试")
            }
        },
        printAxios(){
            console.log(this.$axios);
        }
    }
}
</script>